<template>
  <div class="sub-user">
    <el-page-header @back="goBack" style="margin-bottom: 15px">
      <template #content>
        <span class="text-large font-600 mr-3"> 用户下级 </span>
      </template>
    </el-page-header>
    <avue-crud
      ref="subUserRef"
      :table-loading="tableLoading"
      :option="option"
      @refresh-change="getList"
      :data="data"
      :page="page"
      @size-change="sizeChange"
      @current-change="currentChange"
      @search-change="searchChange"
      @search-reset="searchReset"
    >
    </avue-crud>
  </div>
</template>

<script setup>
import { onMounted, ref, reactive } from "vue";
import { useRouter, useRoute } from "vue-router";
import { getUserList } from "@/apis/admin";
import subUser from "@/options/subUser";
const option = subUser;
const router = useRouter();
const route = useRoute();
const user_Id = ref("");
const tableLoading = ref(false);
const data = ref([]);
const page = reactive({
  total: 0,
  searchInfo: {},
  currentPage: 1,
  pageSize: 10,
});
const sizeChange = (val) => {
  page.pageSize = val;
  getList();
};
const currentChange = (val) => {
  page.currentPage = val;
  getList();
};
const goBack = () => {
  router.go(-1);
};
onMounted(() => {
  user_Id.value = route.query.userId;
  getList();
});
const searchChange = (form, done) => {
  page.searchInfo = form;
  page.currentPage = 1;
  getList();
  done();
};
const searchReset = () => {
  page.searchInfo = {};
  page.currentPage = 1;
  getList();
};
const getList = async () => {
  tableLoading.value = true;
  const res = await getUserList.post("", {
    pageSize: page.pageSize,
    page: page.currentPage,
    searchInfo: { ...page.searchInfo, promoter: user_Id.value },
  });
  tableLoading.value = false;
  if (res.code == 200) {
    page.total = res.data.total;
    data.value = res.data.list || [];
  }
};
</script>

<style lang="scss" scoped>
.sub-user {
  width: 100%;
}
</style>
